<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<title>任务六：通过HTML及CSS模拟报纸排版</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
	<div class="container">
		<div class="head clearfix">
			<span class="h-left">lilfe.baidu.com</span>
			<span class="h-right">2016.03</span>
		</div>
		<div class="main01 clearfix">
			<div class="m-lt">
				<div class="img">
					<img src="image/lt01.gif" />
					<span class="cl"></span>	
					<span class="cr"></span>			
				</div>
				<ul class="clearfix">
					<li class="w01">
						<h2>What</h2>
						<p>
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
					</li>
					<li class="w02">
						<h2>When</h2>
						<p>
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
					</li>
					<li class="w03">
						<h2>How</h2>
						<p>
							前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
						<span>
							What---------<i>40%</i>
							What---------<i>30%</i>
							What---------<i>30%</i>
						</span>
					</li>
				</ul>
			</div>
			<div class="m-rt">
				<hr />
				<h2><a href="#">About</a></h2>
				<h2><a href="#">Technologe</a></h2>
				<i class="i1">About technologe about technologe 
about technologe</i>
				<i class="i2">700</i>
				<div class="c32">3.2<span class="c1">css</span><span class="c2">csscsscsscsscsscsscss</span>
				</div>
			</div>
		</div>
		<div class="main02 clearfix">
			<div class="m2-lt">
				<span class="the">THE</span>
				<span class="tec">TECHLONOGE</span> <br/>
				<span class="tec01">OF FRONT</span>
				<h3>前端技术领域</h3>
				<p class="clearfix">
					<mark>前</mark>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端111前端前端前端前端前端前端前端前端前端前端前端前端<img src="image/p-img.gif" />前端前端前端前端前端前端前端前端前端前端前端<span>11前端前端前端前端前端前端前端前端前端前端前端前端前22端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
				</p>
			</div>
			<div class="m2-rt">
				<div class="rt-img">
					<img src="image/001.gif" />
					<span class="zz"></span>
					<p class="bot">
						<span class="b01"></span>
						<span class="b02">前端技术</span>
						<i>前端技术前端技术</i>
					</p>
				</div>
				<ul class="rt-ul">
					<li><i></i>前端前端前端前端前端前端....................<small>前端</small></li>
					<li><i></i>前端前端前端前端............................<small>前端</small></li>
					<li><i></i>前端前端前端前端前端前端....................<small>前端</small></li>
					<ul class="img-ul">
					<li class="lt clearfix">
						<div class="lt01">0</div>
						<div class="lt02"></div>
						<div class="lt03">
							<span class="l01">ONE TWO </span>
							<span class="l02">THREE FORE FIVE</span>
							<span class="l03">hello world	hello world</span>
							<span class="l04">hello world</span>
						</div>
					</li>
					<li class="rt">
						<span class="rt01">“</span>
						<p class="rt-p">hello world how are you world hello world hello world hello world hello world hello world hello world hello world hello world</p>
						<span class="rt02">”</span>						
					</li>
				</ul>
				</ul>
				
			</div>
		</div>
		<h4 class="bot-line">life.baidu.com</h4>
	</div>
</body>
</html>